<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="esayui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="esayui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="esayui/demo.css">
<script type="text/javascript" src="esayui/jquery.min.js"></script>
<script type="text/javascript" src="esayui/jquery.easyui.min.js"></script>
<script src="js/echarts.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
	$(function() {
		$('#dg').datagrid({
			url : 'getAccounts.action',
			method : 'post',
			toolbar : 'tb',
			striped : true,
			pagination : true,
			rownumbers : true,
			pageList : [ 10, 8, 6, 4, 2 ],
			columns : [ [ {
				field : 'checkbox',
				title : 'checkbox',
				checkbox : 'true'
			}, {
				field : 'accid',
				title : 'ID',
				width : 60
			}, {
				field : 'accno',
				title : '卡号',
				width : 60
			}, {
				field : 'operword',
				title : '密码',
				width : 40
			}, {
				field : 'bankcode',
				title : '银行代号',
				width : 100
			}, {
				field : 'userid',
				title : '用户ID',
				width : 60
			}, {
				field : 'createdate',
				title : '日期',
				width : 100
			}, {
				field : 'balance',
				title : '身份证号',
				width : 150
			}, {
				field : 'state',
				title : '状态',
				width : 60
			},  ] ] 
		});

		//选项卡气泡
		$('#dg').datagrid({
			toolbar : '#tb'
		});

	});
	
	//修改
	function edit() {
		var row = $('#dg').datagrid("getSelected");
		if (!row) {
			alert("请选择需要修改的选项！！！");
		} else {
			$('#dd').dialog({
				title : '修改用户',
				width : 400,
				height : 400,
				closed : false,
				modal : true
			});
			//把数据放入文本框内
			$('#ff').form('load', row);
		}
	}
	
	//删除数据
	function del() {
		var selRow = $('#dg').datagrid("getSelections");//返回选中多行  
		if (selRow.length == 0) {
			alert("请至少选择一行数据!");
			return false;
		}
		var ids = [];
		for (var i = 0; i < selRow.length; i++) {
			//获取自定义table 的中的checkbox值  
			
			var id = selRow[i].accid; //你实体id这个是你要在列表中取的单个id  
			alert(id);
			ids.push(id); //然后把单个id循环放到ids的数组中  
		}

		if(confirm("确定要删除选中的记录吗?")){  
			window.location.href = "deleteacc.action?accid=" + ids;   
			 
			}  
	}
	
	
	function noshow(){ 
		
		$.ajax({
			url:'getAccountstb.action',
			success:function(date){
				var myChart = echarts.init(document.getElementById('main'));
				alert(myChart)

		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: 'ECharts 入门示例'
		            },
		            tooltip: {},
		            legend: {
		                data:['销量']
		            },
		            xAxis: {
		                data: date.accno
		            },
		            yAxis: {},
		            series: [{
		                name: '销量',
		                type: 'bar',
		                data: date.balan
		            }]
		        };

		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
					
			}
		});
	}
</script>
<body>
	银行账户管理 >> 查询账户
	<h1>查询账户</h1>
	<table id="dg">
		<div id="tb">
		<a href="#" onclick="edit()" class="easyui-linkbutton"
				data-options="iconCls:'icon-edit',plain:true">修改</a> <a href="#"
				onclick="del();" class="easyui-linkbutton"
				data-options="iconCls:'icon-remove',plain:true">删除</a>
				<a class="easyui-linkbutton" onclick="noshow();">显示图标数据</a>
		</div>
		<!--  <thead>
			<tr>
				<th data-options="field:'code',width:110">序号</th>
				<th data-options="field:'price',width:100">登陆账号</th>
				<th data-options="field:'price'">账户号</th>
				<th data-options="field:'price'">银行代号</th>
				<th data-options="field:'price'">创建日期</th>
				<th data-options="field:'price',width:120">存款余额</th>
				<th data-options="field:'price',width:110">状态</th>
			</tr>
		</thead>  -->
	</table>
	<div id="dd" style="display: none">
		<form id="ff" action="edit.action" method="post">
			<table>
				<tr>
					<td>序号:</td>
					<td><input type="text" readonly="readonly" name="accid" /></td>
				</tr>
				<tr>
					<td>登陆账号:</td>
					<td><input type="text" name="accno" /></td>
				</tr>
				<tr>
					<td>账户号:</td>
					<td><input type="text" name="operword" /></td>
				</tr>
				<tr>
					<td>银行代号:</td>
					<td><input type="text" name="bankcode" /></td>
				</tr>
				<tr>
					<td>创建日期:</td>
					<td><input type="text" name="createdate" /></td>
				</tr>
				<tr>
					<td>存款余额:</td>
					<td><input type="text" name="balance" /></td>
				</tr>
				<tr>
					<td>状态:</td>
					<td><input type="text" name="state" /></td>
				</tr>
				<tr>
					<td><input type="submit" value="提交" /></td>
					<td><input type="reset" value="重置" /></td>
				</tr>

			</table>
		</form>
	</div>
	 <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>